<script setup lang="ts">
import { ref, onActivated } from 'vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
import { useStorage } from '@/hooks/web/useStorage'
import { useRouter, useRoute } from 'vue-router'
import { getTaskMess } from '@/api/task'
import historyItem from './historyItem.vue'
const { clear } = useStorage()
const { back } = useRouter()
const userInfo = ref(appStore.getUserInfo)
const onBack = () => {
  back()
}

const content = ref([])
const init = () => {
  loading.value = true
  getTaskMess({
    id: taskId.value,
    staffId: userInfo.value.id
  }).then((res) => {
    content.value = res.data
    loading.value = false
  })
}
const taskId = ref('')

const route = useRoute()
onActivated(() => {
  userInfo.value = appStore.getUserInfo
  content.value = []
  const { id } = route.query
  taskId.value = id as string
  init()
})
const loading = ref(false)
</script>

<template>
  <van-nav-bar title="跟进日志" fixed placeholder left-arrow @click-left="onBack" z-index="10">
  </van-nav-bar>
  <van-pull-refresh v-model="loading" @refresh="init" style="">
    <div class="wrapper">
      <div class="stepsList">
        <van-steps direction="vertical" :active="content.length - 1">
          <historyItem v-for="item of content" :item="item" />
        </van-steps>
      </div>
    </div>
  </van-pull-refresh>
</template>

<style lang="less" scoped>
.wrapper {
  padding: 16px 8px;
}
.btnBox {
  padding: 32px 16px;
}
.stepsList {
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 8px;
}
</style>
